<template>
  <van-popup  class="find-password" :show="isShow" round position="bottom" custom-style="height: 90%" closeable @close="closePopup">
		<view class="reset-form get-code" v-show="current == 0">
			<div class="hd">
				<view class="title">忘记密码</view>
				<view class="desc">请输入手机号验证，重新设置密码</view>
			</div>
			<van-cell-group :border="false">
				<van-field
					class="mobile"
					:value="form.phone"
					@input="(e) => {form.phone = e.detail}"
					clearable
					:border="false"
					placeholder="请输入手机号"
				>
				</van-field>
			</van-cell-group>
			<view class="p-y-15 m-t-15">
				<van-button block round type="info" :disabled="!valid.phone" :loading="loading" @click="getCode(0)">获取短信验证码</van-button>
			</view>
		</view>
		<view class="reset-form input-code" v-show="current == 1">
			<div class="hd">
				<view class="title">请输入验证码</view>
				<view class="desc">验证码已发送至{{form.phone}}</view>
			</div>
			<view class="code-input-wrap">
					<input class="code-input" v-model="form.code" type="number" :adjust-position="false" :auto-blur="true" maxlength="6" @input="inputCode" />
					<view class="code-list">
							<block v-for="(item, index) in 6" :key="index">
									<view :class="['code-list-item', form.code.length == index ? 'active-item' : '']">{{ form.code[index] }}</view>
							</block>
					</view>
			</view>
			<view class="p-y-15 m-t-15">
				<van-button block round type="info"  :disabled="code.time > 0" :loading="loading" @click="getCode(1)">重新获取验证码{{code.tip}}</van-button>
			</view>
		</view>
		<view class="reset-form reset-password" v-show="current == 2">
			<div class="hd">
				<view class="title">重新设置密码</view>
				<view class="desc">6-15个字符，使用数字+字母</view>
			</div>
			<van-cell-group :border="false">
				<van-field
					class="mobile"
					:value="form.password"
					@input="(e) => {form.password = e.detail}"
					clearable
					:border="false"
					type="password"
					placeholder="请输入密码"
				>
				</van-field>
			</van-cell-group>
			<view class="p-y-15 m-t-15">
				<van-button block round type="info" :disabled="!valid.password" :loading="loading" @click="submitLogin">完成</van-button>
			</view>
		</view>
  </van-popup>
</template>
<script>
	export default {
    data(){
      return{
				isShow: false,
				current: 1,
        form: {
					phone: '',
					code: '',
					password: null,
				},
        code:{
          tip: '',
          timer: null,
          time: 0,
        },
				valid:{
					phone: false,
					code: false,
					password: false,
				}
      }
    },
		watch:{ 
			'form.phone'(newVal,oldVal){
				var isValid = /^1[0-9]{10}$/.test(newVal);
				this.valid.phone = isValid;				
			},
			'form.password'(newVal,oldVal){
				var isValid = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/.test(newVal);
				this.valid.password = isValid;				
			},
		},
    methods:{
			init(){
				this.current = 0;
				this.isShow = true;
			},
      codeCountDown(time) {
				this.code.time = time || 60 //验证码倒计时
				this.code.tip = '（'+this.code.time + 's）';
				this.code.timer = setInterval(() => {
					this.code.time--
					if(this.code.time > 0){
						this.code.tip = '（'+this.code.time + 's）';
					}
					else{
						this.code.tip = ''
						clearInterval(this.code.timer)
						this.code.timer = null;
					}
				},1000)
			},
      async getCode(type) {
				if(type == 1 && this.code.time > 0){
						return;
				}
				this.current = 1;
				// this.$http('get', '/admin/mobile/'+ this.form.mobile, {}, (data,msg) => {
					
					this.codeCountDown();
					
					
				// });
			},
			inputCode(e) {
        let val = e.detail.value
        this.form.code = val
        if (val && val.length == 6) {
            this.valid.code = true;
						this.current = 2;
        } else {
            this.valid.code = false;
						this.current = 1;
        }
    	},
			closePopup(){
				this.isShow = false;
				this.code.timer = null;
				this.code.time = 0;
				this.current = 0;
				this.form.phone = null;
				this.form.code = null;
				this.form.password = null;
			}
			
    }
  }

</script>